<template>
    <div class="stuInfo">
        <div class="btn">
            <el-button class="addBtn" type="success" @click="addStu">新增学生信息</el-button>
        </div>
        <div class="stuTable">
            <el-table
                border
                class="table"
                :fit="true"
                :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            >
                <el-table-column
                    sortable
                    label="姓名"
                    prop="name"
                >
                </el-table-column>

                <el-table-column
                    sortable
                    label="年龄"
                    prop="age"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    label="性别"
                    prop="sex"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    label="地址"
                    prop="address"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    label="电话"
                    prop="tel"
                >
                </el-table-column>
                <el-table-column
                    sortable
                    label="身份证号"
                    prop="identity"
                >
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    width="200"
                    label="操作"
                >
                    <template slot-scope="{ row, $index }">
                        <el-button type="success" @click="editStu(row)">
                            <i class="el-icon-delete"></i>编辑
                        </el-button>
                        <el-button type="danger" @click="delStu(row)">
                            <i class="el-icon-delete"></i>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pageNation
                :total="tableData.length"
                :page-size="pageSize"
                @pageChange="pageChange"
                :page_index="currentPage"
            />
        </div>
        <StuDialog :dialog="dialog" :StuForm="StuForm" @saveStu="getStuMsg($event)"></StuDialog>
    </div>
</template>
<script>
    import StuDialog from "../../components/StuDialog"
    import pageNation from "../../components/pageNation"
    export default {
        name: "StuInfo",
        components:{
            StuDialog,
            pageNation
        },
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                loading: false,
                tableData: [],
                dialog:{
                    show: false,
                    title: "",
                    option: 'edit', //默认为编辑操作
                },
                StuForm:{
                    _id:"",
                    name:"",
                    age:"",
                    address:"",
                    tel:"",
                    sex:"",
                    identity:""
                }
            };
        },
        mounted() {
            this.getStu();
        },
        methods: {
            //分页
            pageChange(item) {
                this.currentPage = item.page_index;
                this.pageSize = item.page_limit;
            },
            getStu(){
                this.$http.get("/api/findAllStu").then(res=>{
                    if(res.data.code===200){
                        this.tableData=res.data.result;
                    }else{
                        this.$message({
                            type:"error",
                            message:"没有对应学生信息"
                        })
                    }
                })
            },
            //点击删除
            delStu(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post(`/api/delStu/${row.name}`).then(res=>{
                        if(res.data.status===200){
                            this.$message({
                                type:"success",
                                message:res.data.msg
                            });
                            this.getStu();
                        }else{
                            this.$message({
                                type:"error",
                                message:"删除失败"
                            })
                        }
                    })
                }).catch((err) => {
                    console.log(err)
                });
            },
            //编辑
            editStu(row){
                this.dialog={
                    show: true,
                    title: "编辑学生信息",
                    option: 'edit', //默认为编辑操作
                };
                this.StuForm.name=row.name;
                this.StuForm._id=row.name;
                this.StuForm.age=row.age;
                this.StuForm.sex=row.sex;
                this.StuForm.address=row.address;
                this.StuForm.tel=row.tel;
                this.StuForm.identity=row.identity;
            },
            //添加
            addStu(){
                this.dialog={
                    show: true,
                    title: "添加学生信息",
                    option: 'add', //默认为编辑操作
                };
                this.StuForm.name="";
                this.StuForm.age="";
                this.StuForm.sex="";
                this.StuForm.address="";
                this.StuForm.tel="";
                this.StuForm.identity="";
            },
            getStuMsg(stu){
                const url=this.dialog.option==="add" ? "addStu" : `editStu/${stu.id}`;
                this.$http.post(`/api/${url}`,{
                    name:stu.name,
                    age:stu.age,
                    address:stu.address,
                    tel:stu.tel,
                    sex:stu.sex,
                    identity:stu.identity
                }).then(res=>{
                    if(res.data.status===200){
                        this.$message.success(res.data.msg);
                        this.StuForm.name="";
                        this.StuForm.age="";
                        this.StuForm.sex="";
                        this.StuForm.address="";
                        this.StuForm.tel="";
                        this.StuForm.identity="";
                        this.dialog.show=false;
                        this.getStu();
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }
        },
    };
</script>
<style scoped>
    .stuTable{
        margin-top: 20px;
    }
</style>
